<!DOCTYPE html>
<html lang="en-US">
	
<!-- Mirrored from vkuviewdoc.fsq.pub/components/upload.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 21 May 2025 17:31:01 GMT -->
<head>
		<title>Upload 上传 | uView Vue3.0 横空出世，继承uView1.0意志，再战江湖，风云再起！</title>
		<meta charset="utf-8">
		<script>
		  var _hmt = _hmt || [];
		  (function() {
		    var hm = document.createElement("script");
		    hm.src = "../../hm.baidu.com/hm34bd.js?1d1565dd0782e66106e6a42c79ed2554";
		    var s = document.getElementsByTagName("script")[0]; 
		    s.parentNode.insertBefore(hm, s);
		  })();
		  </script>
		<meta name="description" content="同时支持 Vue3.0 和 Vue2.0，你没看错，现在 uView 支持 Vue3.0 了！（不支持nvue，此版本为uView1.0的分支）">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="keywords" content="vk-uview,uviewVue3.0,uview,uView,uviewui,uview ui,uviewUI,uViewui,uViewUI,uView UI,uni ui,uni UI,uni-app ui框架,uni-app UI框架,uniapp ui,ui,UI框架,uniapp ui框架,uniapp UI">
		<link rel="preload" href="../assets/css/0.styles.61168ff3.css" as="style"><link rel="preload" href="../assets/js/app.06a5b7ec.js" as="script"><link rel="preload" href="../assets/js/3.b1cc55a0.js" as="script"><link rel="preload" href="../assets/js/4.4b844322.js" as="script"><link rel="preload" href="../assets/js/62.c196204b.js" as="script"><link rel="preload" href="../assets/js/19.2b0b9da7.js" as="script"><link rel="preload" href="../assets/js/9.ba52e2b0.js" as="script"><link rel="preload" href="../assets/js/6.2c513bee.js" as="script"><link rel="prefetch" href="../assets/js/1.98a9916e.js"><link rel="prefetch" href="../assets/js/10.038f08bd.js"><link rel="prefetch" href="../assets/js/100.a4e49f4f.js"><link rel="prefetch" href="../assets/js/101.5bb80e81.js"><link rel="prefetch" href="../assets/js/102.341da24c.js"><link rel="prefetch" href="../assets/js/103.59b833cd.js"><link rel="prefetch" href="../assets/js/104.a145c535.js"><link rel="prefetch" href="../assets/js/105.c8fea0c4.js"><link rel="prefetch" href="../assets/js/106.d1e658a7.js"><link rel="prefetch" href="../assets/js/107.5f95aed3.js"><link rel="prefetch" href="../assets/js/108.8d2b2544.js"><link rel="prefetch" href="../assets/js/109.10c99e03.js"><link rel="prefetch" href="../assets/js/11.8e74d8b9.js"><link rel="prefetch" href="../assets/js/110.4a7e9307.js"><link rel="prefetch" href="../assets/js/111.773e8680.js"><link rel="prefetch" href="../assets/js/112.c7465195.js"><link rel="prefetch" href="../assets/js/113.b86e8be8.js"><link rel="prefetch" href="../assets/js/114.9ba8246a.js"><link rel="prefetch" href="../assets/js/115.48e5c3e4.js"><link rel="prefetch" href="../assets/js/116.623d8a73.js"><link rel="prefetch" href="../assets/js/117.d9fc756d.js"><link rel="prefetch" href="../assets/js/118.668a7d9f.js"><link rel="prefetch" href="../assets/js/119.6ca5a6b7.js"><link rel="prefetch" href="../assets/js/12.1490d9ad.js"><link rel="prefetch" href="../assets/js/120.8008a6be.js"><link rel="prefetch" href="../assets/js/121.29c37c36.js"><link rel="prefetch" href="../assets/js/122.00c188a8.js"><link rel="prefetch" href="../assets/js/123.22e24add.js"><link rel="prefetch" href="../assets/js/124.e5837e2d.js"><link rel="prefetch" href="../assets/js/125.bd96786c.js"><link rel="prefetch" href="../assets/js/126.e58693e0.js"><link rel="prefetch" href="../assets/js/127.7df2a7cb.js"><link rel="prefetch" href="../assets/js/128.46d0d44f.js"><link rel="prefetch" href="../assets/js/129.533ad2e4.js"><link rel="prefetch" href="../assets/js/13.26869a5e.js"><link rel="prefetch" href="../assets/js/130.33870daa.js"><link rel="prefetch" href="../assets/js/131.6ed8ceeb.js"><link rel="prefetch" href="../assets/js/132.ddabb1d9.js"><link rel="prefetch" href="../assets/js/133.9ec99fba.js"><link rel="prefetch" href="../assets/js/134.ddf9fd84.js"><link rel="prefetch" href="../assets/js/135.c78b3861.js"><link rel="prefetch" href="../assets/js/136.9f35dad7.js"><link rel="prefetch" href="../assets/js/137.f76e23c3.js"><link rel="prefetch" href="../assets/js/138.527154ce.js"><link rel="prefetch" href="../assets/js/139.20fc60a7.js"><link rel="prefetch" href="../assets/js/14.f7c8080a.js"><link rel="prefetch" href="../assets/js/140.94a3c889.js"><link rel="prefetch" href="../assets/js/141.dbec7630.js"><link rel="prefetch" href="../assets/js/142.01e40518.js"><link rel="prefetch" href="../assets/js/143.e69db0a4.js"><link rel="prefetch" href="../assets/js/144.6b44c549.js"><link rel="prefetch" href="../assets/js/145.be0da9a2.js"><link rel="prefetch" href="../assets/js/146.cf66d7a5.js"><link rel="prefetch" href="../assets/js/147.0d33398d.js"><link rel="prefetch" href="../assets/js/148.7ec3725c.js"><link rel="prefetch" href="../assets/js/149.94b68d3b.js"><link rel="prefetch" href="../assets/js/15.9c539d25.js"><link rel="prefetch" href="../assets/js/150.a3cb5d67.js"><link rel="prefetch" href="../assets/js/151.353415e1.js"><link rel="prefetch" href="../assets/js/152.a0e625f0.js"><link rel="prefetch" href="../assets/js/153.9f9ff9df.js"><link rel="prefetch" href="../assets/js/154.3926195f.js"><link rel="prefetch" href="../assets/js/155.4ff0eab8.js"><link rel="prefetch" href="../assets/js/156.30421ecd.js"><link rel="prefetch" href="../assets/js/16.9311470f.js"><link rel="prefetch" href="../assets/js/17.1d2427af.js"><link rel="prefetch" href="../assets/js/18.9f71dea7.js"><link rel="prefetch" href="../assets/js/20.4e7fd7f2.js"><link rel="prefetch" href="../assets/js/21.eeb64d6d.js"><link rel="prefetch" href="../assets/js/22.eeed70a0.js"><link rel="prefetch" href="../assets/js/23.ebadd966.js"><link rel="prefetch" href="../assets/js/24.623888d6.js"><link rel="prefetch" href="../assets/js/25.997678dc.js"><link rel="prefetch" href="../assets/js/26.bdc2a6fc.js"><link rel="prefetch" href="../assets/js/27.14956264.js"><link rel="prefetch" href="../assets/js/28.3e836b17.js"><link rel="prefetch" href="../assets/js/29.88996b95.js"><link rel="prefetch" href="../assets/js/30.26760ff7.js"><link rel="prefetch" href="../assets/js/31.169925f0.js"><link rel="prefetch" href="../assets/js/32.fc848ffd.js"><link rel="prefetch" href="../assets/js/33.4a7b20b5.js"><link rel="prefetch" href="../assets/js/34.080a5b2d.js"><link rel="prefetch" href="../assets/js/35.5664384b.js"><link rel="prefetch" href="../assets/js/36.e6f2d7c1.js"><link rel="prefetch" href="../assets/js/37.7fffb245.js"><link rel="prefetch" href="../assets/js/38.2a818c4b.js"><link rel="prefetch" href="../assets/js/39.b75d1d1f.js"><link rel="prefetch" href="../assets/js/40.eebb261c.js"><link rel="prefetch" href="../assets/js/41.f590ad3d.js"><link rel="prefetch" href="../assets/js/42.3a5a9ad1.js"><link rel="prefetch" href="../assets/js/43.315af682.js"><link rel="prefetch" href="../assets/js/44.e699cfc9.js"><link rel="prefetch" href="../assets/js/45.070488b1.js"><link rel="prefetch" href="../assets/js/46.29f9b10c.js"><link rel="prefetch" href="../assets/js/47.a49c9691.js"><link rel="prefetch" href="../assets/js/48.901960ce.js"><link rel="prefetch" href="../assets/js/49.90f26de6.js"><link rel="prefetch" href="../assets/js/5.1822a725.js"><link rel="prefetch" href="../assets/js/50.d98ea474.js"><link rel="prefetch" href="../assets/js/51.7e81edb0.js"><link rel="prefetch" href="../assets/js/52.ae744cc4.js"><link rel="prefetch" href="../assets/js/53.a87579ea.js"><link rel="prefetch" href="../assets/js/54.09cf1cd4.js"><link rel="prefetch" href="../assets/js/55.8dbe32a9.js"><link rel="prefetch" href="../assets/js/56.4cc4e86e.js"><link rel="prefetch" href="../assets/js/57.5fa9755d.js"><link rel="prefetch" href="../assets/js/58.8a511947.js"><link rel="prefetch" href="../assets/js/59.7f699905.js"><link rel="prefetch" href="../assets/js/60.5cd6bf05.js"><link rel="prefetch" href="../assets/js/61.8e3a5252.js"><link rel="prefetch" href="../assets/js/63.cf346896.js"><link rel="prefetch" href="../assets/js/64.0525bb5d.js"><link rel="prefetch" href="../assets/js/65.2d0a71fc.js"><link rel="prefetch" href="../assets/js/66.7155e206.js"><link rel="prefetch" href="../assets/js/67.40077362.js"><link rel="prefetch" href="../assets/js/68.5bf58e97.js"><link rel="prefetch" href="../assets/js/69.d955f75b.js"><link rel="prefetch" href="../assets/js/7.1d1f1c24.js"><link rel="prefetch" href="../assets/js/70.a8cce98b.js"><link rel="prefetch" href="../assets/js/71.da703543.js"><link rel="prefetch" href="../assets/js/72.c04dfa52.js"><link rel="prefetch" href="../assets/js/73.d07ef280.js"><link rel="prefetch" href="../assets/js/74.8461f6a0.js"><link rel="prefetch" href="../assets/js/75.b4e8bf21.js"><link rel="prefetch" href="../assets/js/76.2df0e4fa.js"><link rel="prefetch" href="../assets/js/77.80fba507.js"><link rel="prefetch" href="../assets/js/78.167eb1f2.js"><link rel="prefetch" href="../assets/js/79.8de07f16.js"><link rel="prefetch" href="../assets/js/8.70b4860e.js"><link rel="prefetch" href="../assets/js/80.62ae9ff8.js"><link rel="prefetch" href="../assets/js/81.6d66b374.js"><link rel="prefetch" href="../assets/js/82.3200cf78.js"><link rel="prefetch" href="../assets/js/83.1d9c3fce.js"><link rel="prefetch" href="../assets/js/84.d9f947a9.js"><link rel="prefetch" href="../assets/js/85.85a4c72a.js"><link rel="prefetch" href="../assets/js/86.93c948f9.js"><link rel="prefetch" href="../assets/js/87.468468cc.js"><link rel="prefetch" href="../assets/js/88.e5fe3f13.js"><link rel="prefetch" href="../assets/js/89.724b1038.js"><link rel="prefetch" href="../assets/js/90.16fb68a1.js"><link rel="prefetch" href="../assets/js/91.338ca55d.js"><link rel="prefetch" href="../assets/js/92.508f7300.js"><link rel="prefetch" href="../assets/js/93.50d169d1.js"><link rel="prefetch" href="../assets/js/94.54461a32.js"><link rel="prefetch" href="../assets/js/95.8f712236.js"><link rel="prefetch" href="../assets/js/96.4c8d5f01.js"><link rel="prefetch" href="../assets/js/97.da347ee4.js"><link rel="prefetch" href="../assets/js/98.94680b58.js"><link rel="prefetch" href="../assets/js/99.7d895609.js">
		<link rel="stylesheet" href="../assets/css/0.styles.61168ff3.css">
		<script>
			var _hmt = _hmt || [];
			(function() {
				var hm = document.createElement("script");
				hm.src = "../../hm.baidu.com/hm81c3.js?43e7eadc8f61e1e064906952da7d51f0";
				var s = document.getElementsByTagName("script")[0];
				s.parentNode.insertBefore(hm, s);
			})();
		</script>
	</head>
	<body>
		<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="../index.html" class="home-link router-link-active"><img src="../common/logo.png" alt="uView Vue3.0 横空出世，继承uView1.0意志，再战江湖，风云再起！" class="logo"> <span class="site-name can-hide">uView</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="../guide/demo.html" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="intro.html" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="../js/intro.html" class="nav-link">
  JS
</a></div><div class="nav-item"><a href="../layout/intro.html" class="nav-link">
  模板
</a></div><div class="nav-item"><a href="resource.html" class="nav-link">
  资源
</a></div><div class="nav-item"><a href="https://ext.dcloud.net.cn/plugin?id=6692" target="_blank" rel="noopener noreferrer" class="nav-link external">
  插件市场
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://gitee.com/vk-uni/vk-uview-ui" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="DCloud插件市场" class="dropdown-title"><span class="title">VK其他插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="DCloud插件市场" class="mobile-dropdown-title"><span class="title">VK其他插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=2204" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud-router（client端）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=5043" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud-admin（admin端）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=5642" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-uni-pay（统一支付）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=2848" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-data-goods-sku-popup（sku组件）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6692" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-uview-ui（uView Vue3.0）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6158" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-redis
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6089" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud数据库一键搬家工具
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6663" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-hbx插件（开发辅助工具）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/publisher?id=164406" target="_blank" rel="noopener noreferrer" class="nav-link external">
  查看更多
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="原版uView" class="dropdown-title"><span class="title">原版uView</span> <span class="arrow down"></span></button> <button type="button" aria-label="原版uView" class="mobile-dropdown-title"><span class="title">原版uView</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://v1.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  1.X
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  2.X
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div><aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="../guide/demo.html" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="intro.html" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="../js/intro.html" class="nav-link">
  JS
</a></div><div class="nav-item"><a href="../layout/intro.html" class="nav-link">
  模板
</a></div><div class="nav-item"><a href="resource.html" class="nav-link">
  资源
</a></div><div class="nav-item"><a href="https://ext.dcloud.net.cn/plugin?id=6692" target="_blank" rel="noopener noreferrer" class="nav-link external">
  插件市场
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://gitee.com/vk-uni/vk-uview-ui" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="DCloud插件市场" class="dropdown-title"><span class="title">VK其他插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="DCloud插件市场" class="mobile-dropdown-title"><span class="title">VK其他插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=2204" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud-router（client端）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=5043" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud-admin（admin端）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=5642" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-uni-pay（统一支付）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=2848" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-data-goods-sku-popup（sku组件）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6692" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-uview-ui（uView Vue3.0）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6158" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-redis
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6089" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud数据库一键搬家工具
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6663" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-hbx插件（开发辅助工具）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/publisher?id=164406" target="_blank" rel="noopener noreferrer" class="nav-link external">
  查看更多
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="原版uView" class="dropdown-title"><span class="title">原版uView</span> <span class="arrow down"></span></button> <button type="button" aria-label="原版uView" class="mobile-dropdown-title"><span class="title">原版uView</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://v1.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  1.X
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  2.X
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>起步</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="addQQGroup.html" class="sidebar-link">加QQ群交流反馈</a></li><li><a href="intro.html" class="sidebar-link">介绍</a></li><li><a href="install.html" class="sidebar-link">安装</a></li><li><a href="quickstart.html" class="sidebar-link">快速上手</a></li><li><a href="common.html" class="sidebar-link">内置样式</a></li><li><a href="feature.html" class="sidebar-link">注意事项</a></li><li><a href="nvue.html" class="sidebar-link">Nvue排错指南</a></li><li><a href="changelog.html" class="sidebar-link">更新日志</a></li><li><a href="changeGuide.html" class="sidebar-link">升级指南</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>基础组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="color.html" class="sidebar-link">Color 色彩</a></li><li><a href="icon.html" class="sidebar-link">Icon 图标</a></li><li><a href="image.html" class="sidebar-link">Image 图片</a></li><li><a href="button.html" class="sidebar-link">Button 按钮</a></li><li><a href="layout.html" class="sidebar-link">Layout 布局</a></li><li><a href="cell.html" class="sidebar-link">Cell 单元格</a></li><li><a href="badge.html" class="sidebar-link">Badge 徽标数</a></li><li><a href="tag.html" class="sidebar-link">Tag 标签</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>表单组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="input.html" class="sidebar-link">Input 输入框</a></li><li><a href="form.html" class="sidebar-link">Form 表单</a></li><li><a href="calendar.html" class="sidebar-link">Calendar 日历</a></li><li><a href="select.html" class="sidebar-link">Select 列选择器</a></li><li><a href="keyboard.html" class="sidebar-link">Keyboard 键盘</a></li><li><a href="picker.html" class="sidebar-link">Picker 选择器</a></li><li><a href="rate.html" class="sidebar-link">Rate 评分</a></li><li><a href="search.html" class="sidebar-link">Search 搜索</a></li><li><a href="numberBox.html" class="sidebar-link">NumberBox 步进器</a></li><li><a href="upload.html" aria-current="page" class="active sidebar-link">Upload 上传</a></li><li><a href="verificationCode.html" class="sidebar-link">VerificationCode 验证码倒计时</a></li><li><a href="field.html" class="sidebar-link">Field 输入框</a></li><li><a href="checkbox.html" class="sidebar-link">Checkbox 复选框</a></li><li><a href="radio.html" class="sidebar-link">Radio 单选框</a></li><li><a href="switch.html" class="sidebar-link">Switch 开关选择器</a></li><li><a href="slider.html" class="sidebar-link">Slider 滑动选择器</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>数据组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="circleProgress.html" class="sidebar-link">CircleProgress 圆形进度条</a></li><li><a href="lineProgress.html" class="sidebar-link">LineProgress 线形进度条</a></li><li><a href="table.html" class="sidebar-link">Table 表格</a></li><li><a href="countDown.html" class="sidebar-link">CountDown 倒计时</a></li><li><a href="countTo.html" class="sidebar-link">CountTo 数字滚动</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>反馈组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="actionSheet.html" class="sidebar-link">ActionSheet 操作菜单</a></li><li><a href="alertTips.html" class="sidebar-link">AlertTips 警告提示</a></li><li><a href="toast.html" class="sidebar-link">Toast 消息提示</a></li><li><a href="noticeBar.html" class="sidebar-link">NoticeBar 滚动通知</a></li><li><a href="topTips.html" class="sidebar-link">TopTips 顶部提示</a></li><li><a href="collapse.html" class="sidebar-link">Collapse 折叠面板</a></li><li><a href="popup.html" class="sidebar-link">Popup 弹出层</a></li><li><a href="swipeAction.html" class="sidebar-link">SwipeAction 滑动操作</a></li><li><a href="modal.html" class="sidebar-link">Modal 模态框</a></li><li><a href="fullScreen.html" class="sidebar-link">fullScreen 压窗屏</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>布局组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="line.html" class="sidebar-link">Line 线条</a></li><li><a href="card.html" class="sidebar-link">Card 卡片</a></li><li><a href="mask.html" class="sidebar-link">Mask 遮罩层</a></li><li><a href="noNetwork.html" class="sidebar-link">NoNetwork 无网络提示</a></li><li><a href="grid.html" class="sidebar-link">Grid 宫格布局</a></li><li><a href="swiper.html" class="sidebar-link">Swiper 轮播图</a></li><li><a href="timeLine.html" class="sidebar-link">TimeLine 时间轴</a></li><li><a href="skeleton.html" class="sidebar-link">Skeleton 骨架屏</a></li><li><a href="sticky.html" class="sidebar-link">Sticky 吸顶</a></li><li><a href="waterfall.html" class="sidebar-link">Waterfall 瀑布流</a></li><li><a href="divider.html" class="sidebar-link">Divider 分割线</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>导航组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="dropdown.html" class="sidebar-link">Dropdown 下拉菜单</a></li><li><a href="tabbar.html" class="sidebar-link">Tabbar 底部导航栏</a></li><li><a href="backTop.html" class="sidebar-link">BackTop 返回顶部</a></li><li><a href="navbar.html" class="sidebar-link">Navbar 自定义导航栏</a></li><li><a href="tabs.html" class="sidebar-link">tabs 标签</a></li><li><a href="tabsSwiper.html" class="sidebar-link">tabsSwiper 全屏选项卡</a></li><li><a href="subsection.html" class="sidebar-link">Subsection 分段器</a></li><li><a href="indexList.html" class="sidebar-link">IndexList 索引列表</a></li><li><a href="steps.html" class="sidebar-link">Steps 步骤条</a></li><li><a href="empty.html" class="sidebar-link">Empty 内容为空</a></li><li><a href="link.html" class="sidebar-link">Link 超链接</a></li><li><a href="section.html" class="sidebar-link">Section 查看更多</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>其他组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="parse.html" class="sidebar-link">Parse 富文本解析器</a></li><li><a href="messageInput.html" class="sidebar-link">MessageInput 验证码输入</a></li><li><a href="avatarCropper.html" class="sidebar-link">AvatarCropper 头像裁剪</a></li><li><a href="loadMore.html" class="sidebar-link">loadMore 加载更多</a></li><li><a href="readMore.html" class="sidebar-link">ReadMore 展开阅读更多</a></li><li><a href="lazyLoad.html" class="sidebar-link">LazyLoad 懒加载</a></li><li><a href="gap.html" class="sidebar-link">Gap 间隔槽</a></li><li><a href="avatar.html" class="sidebar-link">Avatar 头像</a></li><li><a href="loading.html" class="sidebar-link">Loading 加载动画</a></li></ul></section></li></ul></section></li></ul> </aside></div> <main class="page"> <div class="theme-default-content content__default" data-v-35baa3ce data-v-35baa3ce><h2 id="upload-上传" data-v-35baa3ce><a href="#upload-上传" class="header-anchor" data-v-35baa3ce>#</a> Upload 上传 <a href="#api" class="anchor" data-v-2680b636 data-v-35baa3ce><img src="../common/to_api.png" data-v-2680b636></a></h2> <div class="demo-model" data-v-05b12073 data-v-35baa3ce><div class="model-content" data-v-05b12073><iframe scrolling="auto" frameborder="0" src="https://uviewdoc.fsq.pub/#/pages/componentsB/upload/index" id="demo-modal" class="iframe" data-v-05b12073></iframe></div></div> <p data-v-35baa3ce>该组件用于上传图片场景</p> <h3 id="平台差异说明" data-v-35baa3ce><a href="#平台差异说明" class="header-anchor" data-v-35baa3ce>#</a> 平台差异说明</h3> <table data-v-35baa3ce><thead data-v-35baa3ce><tr data-v-35baa3ce><th style="text-align:center;" data-v-35baa3ce>App</th> <th style="text-align:center;" data-v-35baa3ce>H5</th> <th style="text-align:center;" data-v-35baa3ce>微信小程序</th> <th style="text-align:center;" data-v-35baa3ce>支付宝小程序</th> <th style="text-align:center;" data-v-35baa3ce>百度小程序</th> <th style="text-align:center;" data-v-35baa3ce>头条小程序</th> <th style="text-align:center;" data-v-35baa3ce>QQ小程序</th></tr></thead> <tbody data-v-35baa3ce><tr data-v-35baa3ce><td style="text-align:center;" data-v-35baa3ce>√</td> <td style="text-align:center;" data-v-35baa3ce>√</td> <td style="text-align:center;" data-v-35baa3ce>√</td> <td style="text-align:center;" data-v-35baa3ce>√</td> <td style="text-align:center;" data-v-35baa3ce>√</td> <td style="text-align:center;" data-v-35baa3ce>√</td> <td style="text-align:center;" data-v-35baa3ce>√</td></tr></tbody></table> <h3 id="基本使用" data-v-35baa3ce><a href="#基本使用" class="header-anchor" data-v-35baa3ce>#</a> 基本使用</h3> <ul data-v-35baa3ce><li data-v-35baa3ce>可以通过设置<code data-v-35baa3ce>file-list</code>参数(数组，元素为对象)，显示预置的图片。其中元素的<code data-v-35baa3ce>url</code>属性为图片路径</li> <li data-v-35baa3ce>设置<code data-v-35baa3ce>action</code>参数为后端服务器地址，注意H5在浏览器可能会有跨域限制，让后端允许域即可</li></ul> <div class="language-html extra-class" data-v-35baa3ce><pre class="language-html" data-v-35baa3ce><code data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
	<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>u-upload</span> <span class="token attr-name" data-v-35baa3ce>:action</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>action<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>:file-list</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>fileList<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>u-upload</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>

<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>script</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token script" data-v-35baa3ce><span class="token language-javascript" data-v-35baa3ce>
	<span class="token keyword" data-v-35baa3ce>export</span> <span class="token keyword" data-v-35baa3ce>default</span> <span class="token punctuation" data-v-35baa3ce>{</span>
		<span class="token function" data-v-35baa3ce>data</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token punctuation" data-v-35baa3ce>)</span> <span class="token punctuation" data-v-35baa3ce>{</span>
			<span class="token keyword" data-v-35baa3ce>return</span> <span class="token punctuation" data-v-35baa3ce>{</span>
				<span class="token comment" data-v-35baa3ce>// 演示地址，请勿直接使用</span>
				<span class="token literal-property property" data-v-35baa3ce>action</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token string" data-v-35baa3ce>'http://www.example.com/upload'</span><span class="token punctuation" data-v-35baa3ce>,</span>
				<span class="token literal-property property" data-v-35baa3ce>fileList</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token punctuation" data-v-35baa3ce>[</span>
					<span class="token punctuation" data-v-35baa3ce>{</span>
						<span class="token literal-property property" data-v-35baa3ce>url</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token string" data-v-35baa3ce>'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg'</span><span class="token punctuation" data-v-35baa3ce>,</span>
					<span class="token punctuation" data-v-35baa3ce>}</span>
				<span class="token punctuation" data-v-35baa3ce>]</span>
			<span class="token punctuation" data-v-35baa3ce>}</span>
		<span class="token punctuation" data-v-35baa3ce>}</span>
	<span class="token punctuation" data-v-35baa3ce>}</span>
</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>script</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
</code></pre></div><h3 id="手动上传" data-v-35baa3ce><a href="#手动上传" class="header-anchor" data-v-35baa3ce>#</a> 手动上传</h3> <p data-v-35baa3ce>组件默认为自动上传，可以设置<code data-v-35baa3ce>auto-upload</code>为<code data-v-35baa3ce>false</code>，然后通过<code data-v-35baa3ce>ref</code>调用组件的<code data-v-35baa3ce>upload</code>方法，手动上传图片</p> <div class="language-html extra-class" data-v-35baa3ce><pre class="language-html" data-v-35baa3ce><code data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
	<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>view</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
		<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>u-upload</span> <span class="token attr-name" data-v-35baa3ce>ref</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>uUpload1<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>:action</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>action<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>:auto-upload</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>false<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>u-upload</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
		<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>u-button</span> <span class="token attr-name" data-v-35baa3ce>@click</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>submit<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>提交<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>u-button</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
	<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>view</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>

<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>script</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token script" data-v-35baa3ce><span class="token language-javascript" data-v-35baa3ce>
	<span class="token keyword" data-v-35baa3ce>export</span> <span class="token keyword" data-v-35baa3ce>default</span> <span class="token punctuation" data-v-35baa3ce>{</span>
		<span class="token function" data-v-35baa3ce>data</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token punctuation" data-v-35baa3ce>)</span> <span class="token punctuation" data-v-35baa3ce>{</span>
			<span class="token keyword" data-v-35baa3ce>return</span> <span class="token punctuation" data-v-35baa3ce>{</span>
				<span class="token comment" data-v-35baa3ce>// 非真实地址</span>
				<span class="token literal-property property" data-v-35baa3ce>action</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token string" data-v-35baa3ce>'http://www.example.com/upload'</span><span class="token punctuation" data-v-35baa3ce>,</span>
			<span class="token punctuation" data-v-35baa3ce>}</span>
		<span class="token punctuation" data-v-35baa3ce>}</span><span class="token punctuation" data-v-35baa3ce>,</span>
		<span class="token literal-property property" data-v-35baa3ce>methods</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token punctuation" data-v-35baa3ce>{</span>
			<span class="token function" data-v-35baa3ce>submit</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token punctuation" data-v-35baa3ce>)</span> <span class="token punctuation" data-v-35baa3ce>{</span>
				<span class="token keyword" data-v-35baa3ce>this</span><span class="token punctuation" data-v-35baa3ce>.</span>$refs<span class="token punctuation" data-v-35baa3ce>.</span>uUpload1<span class="token punctuation" data-v-35baa3ce>.</span><span class="token function" data-v-35baa3ce>upload</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token punctuation" data-v-35baa3ce>)</span><span class="token punctuation" data-v-35baa3ce>;</span>
			<span class="token punctuation" data-v-35baa3ce>}</span><span class="token punctuation" data-v-35baa3ce>,</span>
		<span class="token punctuation" data-v-35baa3ce>}</span>
	<span class="token punctuation" data-v-35baa3ce>}</span>
</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>script</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
</code></pre></div><h3 id="获取上传的图片列表" data-v-35baa3ce><a href="#获取上传的图片列表" class="header-anchor" data-v-35baa3ce>#</a> 获取上传的图片列表</h3> <p data-v-35baa3ce>图片选择或者上传成功后，会保存在组件内部的<code data-v-35baa3ce>lists</code>数组中，数组元素为对象，有如下属性：</p> <ul data-v-35baa3ce><li data-v-35baa3ce>url: 图片地址</li> <li data-v-35baa3ce>error：组件内部使用，不应根据此值判断上传是否成功，而应根据<code data-v-35baa3ce>progress</code>属性</li> <li data-v-35baa3ce>progress：如果值为100，表示图片上传成功</li> <li data-v-35baa3ce>response：上传成功后，服务器返回的数据，这是最有用的了</li></ul> <p data-v-35baa3ce>为了获得上传的文件列表，可以在提交表单时，通过<code data-v-35baa3ce>ref</code>获取组件内部的<code data-v-35baa3ce>lists</code>文件数组，历遍元素筛选出<code data-v-35baa3ce>progress</code>为100的文件</p> <div class="language-html extra-class" data-v-35baa3ce><pre class="language-html" data-v-35baa3ce><code data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
	<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>view</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
		<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>u-upload</span> <span class="token attr-name" data-v-35baa3ce>ref</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>uUpload1<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>:action</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>action<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>:auto-upload</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>true<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>u-upload</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
		<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>u-button</span> <span class="token attr-name" data-v-35baa3ce>@click</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>submit<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>提交<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>u-button</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
	<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>view</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>

<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>script</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token script" data-v-35baa3ce><span class="token language-javascript" data-v-35baa3ce>
	<span class="token keyword" data-v-35baa3ce>export</span> <span class="token keyword" data-v-35baa3ce>default</span> <span class="token punctuation" data-v-35baa3ce>{</span>
		<span class="token function" data-v-35baa3ce>data</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token punctuation" data-v-35baa3ce>)</span> <span class="token punctuation" data-v-35baa3ce>{</span>
			<span class="token keyword" data-v-35baa3ce>return</span> <span class="token punctuation" data-v-35baa3ce>{</span>
				<span class="token literal-property property" data-v-35baa3ce>action</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token string" data-v-35baa3ce>'http://www.example.com/upload'</span><span class="token punctuation" data-v-35baa3ce>,</span>
				<span class="token literal-property property" data-v-35baa3ce>filesArr</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token punctuation" data-v-35baa3ce>[</span><span class="token punctuation" data-v-35baa3ce>]</span>
			<span class="token punctuation" data-v-35baa3ce>}</span>
		<span class="token punctuation" data-v-35baa3ce>}</span><span class="token punctuation" data-v-35baa3ce>,</span>
		<span class="token literal-property property" data-v-35baa3ce>methods</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token punctuation" data-v-35baa3ce>{</span>
			<span class="token function" data-v-35baa3ce>submit</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token punctuation" data-v-35baa3ce>)</span> <span class="token punctuation" data-v-35baa3ce>{</span>
				<span class="token keyword" data-v-35baa3ce>let</span> files <span class="token operator" data-v-35baa3ce>=</span> <span class="token punctuation" data-v-35baa3ce>[</span><span class="token punctuation" data-v-35baa3ce>]</span><span class="token punctuation" data-v-35baa3ce>;</span>
				<span class="token comment" data-v-35baa3ce>// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)</span>
				files <span class="token operator" data-v-35baa3ce>=</span> <span class="token keyword" data-v-35baa3ce>this</span><span class="token punctuation" data-v-35baa3ce>.</span>$refs<span class="token punctuation" data-v-35baa3ce>.</span>uUpload1<span class="token punctuation" data-v-35baa3ce>.</span>lists<span class="token punctuation" data-v-35baa3ce>.</span><span class="token function" data-v-35baa3ce>filter</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token parameter" data-v-35baa3ce>val</span> <span class="token operator" data-v-35baa3ce>=&gt;</span> <span class="token punctuation" data-v-35baa3ce>{</span>
					<span class="token keyword" data-v-35baa3ce>return</span> val<span class="token punctuation" data-v-35baa3ce>.</span>progress <span class="token operator" data-v-35baa3ce>==</span> <span class="token number" data-v-35baa3ce>100</span><span class="token punctuation" data-v-35baa3ce>;</span>
				<span class="token punctuation" data-v-35baa3ce>}</span><span class="token punctuation" data-v-35baa3ce>)</span>
				<span class="token comment" data-v-35baa3ce>// 如果您不需要进行太多的处理，直接如下即可</span>
				<span class="token comment" data-v-35baa3ce>// files = this.$refs.uUpload1.lists;</span>
				console<span class="token punctuation" data-v-35baa3ce>.</span><span class="token function" data-v-35baa3ce>log</span><span class="token punctuation" data-v-35baa3ce>(</span>files<span class="token punctuation" data-v-35baa3ce>)</span>
			<span class="token punctuation" data-v-35baa3ce>}</span>
		<span class="token punctuation" data-v-35baa3ce>}</span>
	<span class="token punctuation" data-v-35baa3ce>}</span>
</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>script</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
</code></pre></div><h3 id="报错提示" data-v-35baa3ce><a href="#报错提示" class="header-anchor" data-v-35baa3ce>#</a> 报错提示</h3> <p data-v-35baa3ce>在以下几种情况，组件会默认通过toast提示用户信息，可以把<code data-v-35baa3ce>show-tips</code>设置为<code data-v-35baa3ce>false</code>取消默认的提示，这时可以通过API
中的各种事件，进行自定义的个性化提示</p> <ul data-v-35baa3ce><li data-v-35baa3ce>超出允许的最大上传数量</li> <li data-v-35baa3ce>图片大小超出最大允许大小</li> <li data-v-35baa3ce>上传图片出错</li> <li data-v-35baa3ce>移除图片</li></ul> <p data-v-35baa3ce>以下示例为屏蔽组件内部的提示，在移除图片时，监听<code data-v-35baa3ce>onRemove</code>事件，手动提示的情况</p> <div class="language-html extra-class" data-v-35baa3ce><pre class="language-html" data-v-35baa3ce><code data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
	<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>u-upload</span> <span class="token attr-name" data-v-35baa3ce>ref</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>uUpload1<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>:action</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>action<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>:show-tips</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>false<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>@on-remove</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>onRemove<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>u-upload</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>

<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>script</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token script" data-v-35baa3ce><span class="token language-javascript" data-v-35baa3ce>
	<span class="token keyword" data-v-35baa3ce>export</span> <span class="token keyword" data-v-35baa3ce>default</span> <span class="token punctuation" data-v-35baa3ce>{</span>
		<span class="token function" data-v-35baa3ce>data</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token punctuation" data-v-35baa3ce>)</span> <span class="token punctuation" data-v-35baa3ce>{</span>
			<span class="token keyword" data-v-35baa3ce>return</span> <span class="token punctuation" data-v-35baa3ce>{</span>
				<span class="token literal-property property" data-v-35baa3ce>action</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token string" data-v-35baa3ce>'http://www.example.com/upload'</span><span class="token punctuation" data-v-35baa3ce>,</span>
			<span class="token punctuation" data-v-35baa3ce>}</span>
		<span class="token punctuation" data-v-35baa3ce>}</span><span class="token punctuation" data-v-35baa3ce>,</span>
		<span class="token literal-property property" data-v-35baa3ce>methods</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token punctuation" data-v-35baa3ce>{</span>
			<span class="token function" data-v-35baa3ce>onRemove</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token parameter" data-v-35baa3ce>index<span class="token punctuation" data-v-35baa3ce>,</span> lists</span><span class="token punctuation" data-v-35baa3ce>)</span> <span class="token punctuation" data-v-35baa3ce>{</span>
				console<span class="token punctuation" data-v-35baa3ce>.</span><span class="token function" data-v-35baa3ce>log</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token string" data-v-35baa3ce>'图片已被移除'</span><span class="token punctuation" data-v-35baa3ce>)</span>
			<span class="token punctuation" data-v-35baa3ce>}</span><span class="token punctuation" data-v-35baa3ce>,</span>
		<span class="token punctuation" data-v-35baa3ce>}</span>
	<span class="token punctuation" data-v-35baa3ce>}</span>
</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>script</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
</code></pre></div><h3 id="限制图片数量和大小" data-v-35baa3ce><a href="#限制图片数量和大小" class="header-anchor" data-v-35baa3ce>#</a> 限制图片数量和大小</h3> <ul data-v-35baa3ce><li data-v-35baa3ce>通过<code data-v-35baa3ce>max-count</code>可以设置最多可以选择的图片的数量</li> <li data-v-35baa3ce>通过<code data-v-35baa3ce>max-size</code>设置单张图片最大的大小，单位为B(byte)，默认不限制</li></ul> <p data-v-35baa3ce>下方示例为单张最大为5M，最多选择6张的情况：</p> <div class="language-html extra-class" data-v-35baa3ce><pre class="language-html" data-v-35baa3ce><code data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>u-upload</span> <span class="token attr-name" data-v-35baa3ce>:max-size</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>5 * 1024 * 1024<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>max-count</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>6<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>u-upload</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
</code></pre></div><h3 id="上传前的钩子" data-v-35baa3ce><a href="#上传前的钩子" class="header-anchor" data-v-35baa3ce>#</a> 上传前的钩子</h3> <p data-v-35baa3ce>某些时候，<strong data-v-35baa3ce>每个文件</strong>上传前可能需要动态修改文件名，修改额外参数等，就会需要用到一个叫<code data-v-35baa3ce>before-upload</code>的钩子(参数注意不要加括号)，也即回调方法，此方法会返回两个参数：</p> <ul data-v-35baa3ce><li data-v-35baa3ce><code data-v-35baa3ce>index</code>——即当前上传文件在上传列表中的索引</li> <li data-v-35baa3ce><code data-v-35baa3ce>lists</code>——当前所有的文件列表</li></ul> <p data-v-35baa3ce>此回调可以返回一个<code data-v-35baa3ce>promise</code>、<code data-v-35baa3ce>true</code>，或者<code data-v-35baa3ce>false</code>，下面分别阐述三者的处理情况：</p> <ul data-v-35baa3ce><li data-v-35baa3ce><code data-v-35baa3ce>false</code>——如果返回<code data-v-35baa3ce>false</code>，将会跳过当前文件，继续上传下一张图片(如果有)，并且再次执行<code data-v-35baa3ce>before-upload</code>钩子</li> <li data-v-35baa3ce><code data-v-35baa3ce>true</code>——如果返回<code data-v-35baa3ce>true</code>，会随即上传当前文件，上传成功后，继续上传下一张图片(如果有)，并且再次执行<code data-v-35baa3ce>before-upload</code>钩子</li> <li data-v-35baa3ce><code data-v-35baa3ce>promise</code>——如果返回的是一个<code data-v-35baa3ce>promise</code>，如果进入<code data-v-35baa3ce>then</code>回调，就会和返回<code data-v-35baa3ce>true</code>的情况一样，如果进入<code data-v-35baa3ce>catch</code>回调，就会和返回<code data-v-35baa3ce>false</code>的情况一样</li></ul> <p data-v-35baa3ce>下面举例说明：</p> <h4 id="_1-普通返回" data-v-35baa3ce><a href="#_1-普通返回" class="header-anchor" data-v-35baa3ce>#</a> 1. 普通返回</h4> <div class="language-html extra-class" data-v-35baa3ce><pre class="language-html" data-v-35baa3ce><code data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
	<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>u-upload</span> <span class="token attr-name" data-v-35baa3ce>:before-upload</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>beforeUpload<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>u-upload</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>

<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>script</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token script" data-v-35baa3ce><span class="token language-javascript" data-v-35baa3ce>
	<span class="token keyword" data-v-35baa3ce>export</span> <span class="token keyword" data-v-35baa3ce>default</span> <span class="token punctuation" data-v-35baa3ce>{</span>
		<span class="token literal-property property" data-v-35baa3ce>methods</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token punctuation" data-v-35baa3ce>{</span>
			<span class="token function" data-v-35baa3ce>beforeUpload</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token parameter" data-v-35baa3ce>index<span class="token punctuation" data-v-35baa3ce>,</span> list</span><span class="token punctuation" data-v-35baa3ce>)</span> <span class="token punctuation" data-v-35baa3ce>{</span>
				<span class="token comment" data-v-35baa3ce>// 只上传偶数索引的文件</span>
				<span class="token keyword" data-v-35baa3ce>if</span><span class="token punctuation" data-v-35baa3ce>(</span>index <span class="token operator" data-v-35baa3ce>%</span> <span class="token number" data-v-35baa3ce>2</span> <span class="token operator" data-v-35baa3ce>==</span> <span class="token number" data-v-35baa3ce>0</span><span class="token punctuation" data-v-35baa3ce>)</span> <span class="token keyword" data-v-35baa3ce>return</span> <span class="token boolean" data-v-35baa3ce>true</span><span class="token punctuation" data-v-35baa3ce>;</span>
				<span class="token keyword" data-v-35baa3ce>else</span> <span class="token keyword" data-v-35baa3ce>return</span> <span class="token boolean" data-v-35baa3ce>false</span><span class="token punctuation" data-v-35baa3ce>;</span>
			<span class="token punctuation" data-v-35baa3ce>}</span>
		<span class="token punctuation" data-v-35baa3ce>}</span>
	<span class="token punctuation" data-v-35baa3ce>}</span>
</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>script</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
</code></pre></div><h4 id="_2-请求之后再返回" data-v-35baa3ce><a href="#_2-请求之后再返回" class="header-anchor" data-v-35baa3ce>#</a> 2. 请求之后再返回</h4> <div class="language-html extra-class" data-v-35baa3ce><pre class="language-html" data-v-35baa3ce><code data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
	<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>u-upload</span> <span class="token attr-name" data-v-35baa3ce>:before-upload</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>beforeUpload<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>u-upload</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>

<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>script</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token script" data-v-35baa3ce><span class="token language-javascript" data-v-35baa3ce>
	<span class="token keyword" data-v-35baa3ce>export</span> <span class="token keyword" data-v-35baa3ce>default</span> <span class="token punctuation" data-v-35baa3ce>{</span>
		<span class="token literal-property property" data-v-35baa3ce>methods</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token punctuation" data-v-35baa3ce>{</span>
			<span class="token keyword" data-v-35baa3ce>async</span> <span class="token function" data-v-35baa3ce>beforeUpload</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token parameter" data-v-35baa3ce>index<span class="token punctuation" data-v-35baa3ce>,</span> list</span><span class="token punctuation" data-v-35baa3ce>)</span> <span class="token punctuation" data-v-35baa3ce>{</span>
				<span class="token comment" data-v-35baa3ce>// await等待一个请求，请求回来后再返回true，继续上传文件</span>
				<span class="token keyword" data-v-35baa3ce>let</span> data <span class="token operator" data-v-35baa3ce>=</span> <span class="token keyword" data-v-35baa3ce>await</span> <span class="token keyword" data-v-35baa3ce>this</span><span class="token punctuation" data-v-35baa3ce>.</span>$u<span class="token punctuation" data-v-35baa3ce>.</span><span class="token function" data-v-35baa3ce>post</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token string" data-v-35baa3ce>'url'</span><span class="token punctuation" data-v-35baa3ce>)</span><span class="token punctuation" data-v-35baa3ce>;</span>
				<span class="token keyword" data-v-35baa3ce>return</span> <span class="token boolean" data-v-35baa3ce>true</span><span class="token punctuation" data-v-35baa3ce>;</span> <span class="token comment" data-v-35baa3ce>// 或者根据逻辑返回false</span>
			<span class="token punctuation" data-v-35baa3ce>}</span>
		<span class="token punctuation" data-v-35baa3ce>}</span>
	<span class="token punctuation" data-v-35baa3ce>}</span>
</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>script</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
</code></pre></div><h4 id="_3-返回一个promise" data-v-35baa3ce><a href="#_3-返回一个promise" class="header-anchor" data-v-35baa3ce>#</a> 3. 返回一个Promise</h4> <div class="language-html extra-class" data-v-35baa3ce><pre class="language-html" data-v-35baa3ce><code data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
	<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>u-upload</span> <span class="token attr-name" data-v-35baa3ce>:before-upload</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>beforeUpload<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>u-upload</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>

<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>script</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token script" data-v-35baa3ce><span class="token language-javascript" data-v-35baa3ce>
	<span class="token keyword" data-v-35baa3ce>export</span> <span class="token keyword" data-v-35baa3ce>default</span> <span class="token punctuation" data-v-35baa3ce>{</span>
		<span class="token literal-property property" data-v-35baa3ce>methods</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token punctuation" data-v-35baa3ce>{</span>
			<span class="token function" data-v-35baa3ce>beforeUpload</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token parameter" data-v-35baa3ce>index<span class="token punctuation" data-v-35baa3ce>,</span> list</span><span class="token punctuation" data-v-35baa3ce>)</span> <span class="token punctuation" data-v-35baa3ce>{</span>
				<span class="token comment" data-v-35baa3ce>// 返回一个promise</span>
				<span class="token keyword" data-v-35baa3ce>return</span> <span class="token keyword" data-v-35baa3ce>new</span> <span class="token class-name" data-v-35baa3ce>Promise</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token parameter" data-v-35baa3ce>resolve<span class="token punctuation" data-v-35baa3ce>,</span> reject</span><span class="token punctuation" data-v-35baa3ce>)</span> <span class="token operator" data-v-35baa3ce>=&gt;</span> <span class="token punctuation" data-v-35baa3ce>{</span>
					<span class="token keyword" data-v-35baa3ce>this</span><span class="token punctuation" data-v-35baa3ce>.</span>$u<span class="token punctuation" data-v-35baa3ce>.</span><span class="token function" data-v-35baa3ce>post</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token string" data-v-35baa3ce>'url'</span><span class="token punctuation" data-v-35baa3ce>)</span><span class="token punctuation" data-v-35baa3ce>.</span><span class="token function" data-v-35baa3ce>then</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token parameter" data-v-35baa3ce>res</span> <span class="token operator" data-v-35baa3ce>=&gt;</span> <span class="token punctuation" data-v-35baa3ce>{</span>
						<span class="token comment" data-v-35baa3ce>// resolve()之后，将会进入promise的组件内部的then回调，相当于返回true</span>
						<span class="token function" data-v-35baa3ce>resolve</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token punctuation" data-v-35baa3ce>)</span><span class="token punctuation" data-v-35baa3ce>;</span>
					<span class="token punctuation" data-v-35baa3ce>}</span><span class="token punctuation" data-v-35baa3ce>)</span><span class="token punctuation" data-v-35baa3ce>.</span><span class="token function" data-v-35baa3ce>catch</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token parameter" data-v-35baa3ce>err</span> <span class="token operator" data-v-35baa3ce>=&gt;</span> <span class="token punctuation" data-v-35baa3ce>{</span>
						<span class="token comment" data-v-35baa3ce>// reject()之后，将会进入promise的组件内部的catch回调，相当于返回false</span>
						<span class="token function" data-v-35baa3ce>reject</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token punctuation" data-v-35baa3ce>)</span><span class="token punctuation" data-v-35baa3ce>;</span>
					<span class="token punctuation" data-v-35baa3ce>}</span><span class="token punctuation" data-v-35baa3ce>)</span>
				<span class="token punctuation" data-v-35baa3ce>}</span><span class="token punctuation" data-v-35baa3ce>)</span>
			<span class="token punctuation" data-v-35baa3ce>}</span>
		<span class="token punctuation" data-v-35baa3ce>}</span>
	<span class="token punctuation" data-v-35baa3ce>}</span>
</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>script</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
</code></pre></div><h3 id="移除前的钩子" data-v-35baa3ce><a href="#移除前的钩子" class="header-anchor" data-v-35baa3ce>#</a> 移除前的钩子</h3> <p data-v-35baa3ce>某些时候，文件被移除前可能需要进行判断是否可以被移除，就会需要用到一个叫<code data-v-35baa3ce>before-remove</code>的钩子(参数注意不要加括号)，也即回调方法，此方法会返回两个参数：</p> <ul data-v-35baa3ce><li data-v-35baa3ce><code data-v-35baa3ce>index</code>——即当前上传文件在上传列表中的索引</li> <li data-v-35baa3ce><code data-v-35baa3ce>lists</code>——当前所有的文件列表</li></ul> <p data-v-35baa3ce>此回调可以返回一个<code data-v-35baa3ce>promise</code>、<code data-v-35baa3ce>true</code>，或者<code data-v-35baa3ce>false</code>，下面分别阐述三者的处理情况：</p> <ul data-v-35baa3ce><li data-v-35baa3ce><code data-v-35baa3ce>false</code>——如果返回<code data-v-35baa3ce>false</code>，终止移除操作</li> <li data-v-35baa3ce><code data-v-35baa3ce>true</code>——如果返回<code data-v-35baa3ce>true</code>，执行移除操作</li> <li data-v-35baa3ce><code data-v-35baa3ce>promise</code>——如果返回的是一个<code data-v-35baa3ce>promise</code>，如果进入<code data-v-35baa3ce>then</code>回调，就会和返回<code data-v-35baa3ce>true</code>的情况一样，如果进入<code data-v-35baa3ce>catch</code>回调，就会和返回<code data-v-35baa3ce>false</code>的情况一样</li></ul> <p data-v-35baa3ce>此处不举例说明，参考<code data-v-35baa3ce>before-upload</code>的示例即可。</p> <h3 id="自定义相关说明" data-v-35baa3ce><a href="#自定义相关说明" class="header-anchor" data-v-35baa3ce>#</a> 自定义相关说明</h3> <ol data-v-35baa3ce><li data-v-35baa3ce><p data-v-35baa3ce>组件内部样式<br data-v-35baa3ce>
组件默认选取图片会展示预览缩略图，包括默认的选取图片的按钮，他们的宽高都是<code data-v-35baa3ce>200rpx</code>，<code data-v-35baa3ce>border-radius</code>值为<code data-v-35baa3ce>10rpx</code>，
另外预览图片的盒子有一个默认的边框，值为<code data-v-35baa3ce>border: 1px solid rgb(235, 236, 238)</code>。如果用户需要自定义上传按钮，可以参考这些值。</p></li> <li data-v-35baa3ce><p data-v-35baa3ce>自定义上传按钮<br data-v-35baa3ce>
通过传递名为<code data-v-35baa3ce>addBtn</code>的<code data-v-35baa3ce>slot</code>，同时配置<code data-v-35baa3ce>custom-btn</code>为<code data-v-35baa3ce>true</code>，可以自定义想要的上传按钮。</p></li></ol> <p data-v-35baa3ce>如下所示：</p> <div class="language-html extra-class" data-v-35baa3ce><pre class="language-html" data-v-35baa3ce><code data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
	<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>u-upload</span> <span class="token attr-name" data-v-35baa3ce>:custom-btn</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>true<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
		<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>template</span> <span class="token attr-name" data-v-35baa3ce><span class="token namespace" data-v-35baa3ce>v-slot:</span>addBtn</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
			<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>view</span> <span class="token attr-name" data-v-35baa3ce>class</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>slot-btn<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>hover-class</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>slot-btn__hover<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>hover-stay-time</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>150<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
				<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>u-icon</span> <span class="token attr-name" data-v-35baa3ce>name</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>photo<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>size</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>60<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>:color</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>$u.color[<span class="token punctuation" data-v-35baa3ce>'</span>lightColor<span class="token punctuation" data-v-35baa3ce>'</span>]<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>u-icon</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
			<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>view</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
		<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
	<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>u-upload</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>

<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>style</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token style" data-v-35baa3ce><span class="token language-css" data-v-35baa3ce>
<span class="token selector" data-v-35baa3ce>.slot-btn</span> <span class="token punctuation" data-v-35baa3ce>{</span>
	<span class="token property" data-v-35baa3ce>width</span><span class="token punctuation" data-v-35baa3ce>:</span> 329rpx<span class="token punctuation" data-v-35baa3ce>;</span>
	<span class="token property" data-v-35baa3ce>height</span><span class="token punctuation" data-v-35baa3ce>:</span> 140rpx<span class="token punctuation" data-v-35baa3ce>;</span>
	<span class="token property" data-v-35baa3ce>display</span><span class="token punctuation" data-v-35baa3ce>:</span> flex<span class="token punctuation" data-v-35baa3ce>;</span>
	<span class="token property" data-v-35baa3ce>justify-content</span><span class="token punctuation" data-v-35baa3ce>:</span> center<span class="token punctuation" data-v-35baa3ce>;</span>
	<span class="token property" data-v-35baa3ce>align-items</span><span class="token punctuation" data-v-35baa3ce>:</span> center<span class="token punctuation" data-v-35baa3ce>;</span>
	<span class="token property" data-v-35baa3ce>background</span><span class="token punctuation" data-v-35baa3ce>:</span> <span class="token function" data-v-35baa3ce>rgb</span><span class="token punctuation" data-v-35baa3ce>(</span>244<span class="token punctuation" data-v-35baa3ce>,</span> 245<span class="token punctuation" data-v-35baa3ce>,</span> 246<span class="token punctuation" data-v-35baa3ce>)</span><span class="token punctuation" data-v-35baa3ce>;</span>
	<span class="token property" data-v-35baa3ce>border-radius</span><span class="token punctuation" data-v-35baa3ce>:</span> 10rpx<span class="token punctuation" data-v-35baa3ce>;</span>
<span class="token punctuation" data-v-35baa3ce>}</span>

<span class="token selector" data-v-35baa3ce>.slot-btn__hover</span> <span class="token punctuation" data-v-35baa3ce>{</span>
	<span class="token property" data-v-35baa3ce>background-color</span><span class="token punctuation" data-v-35baa3ce>:</span> <span class="token function" data-v-35baa3ce>rgb</span><span class="token punctuation" data-v-35baa3ce>(</span>235<span class="token punctuation" data-v-35baa3ce>,</span> 236<span class="token punctuation" data-v-35baa3ce>,</span> 238<span class="token punctuation" data-v-35baa3ce>)</span><span class="token punctuation" data-v-35baa3ce>;</span>
<span class="token punctuation" data-v-35baa3ce>}</span>
</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>style</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
</code></pre></div><ol start="3" data-v-35baa3ce><li data-v-35baa3ce>自定义预览列表
首先需要设置<code data-v-35baa3ce>show-upload-list</code>为<code data-v-35baa3ce>false</code>来去除组件内部的默认预览列表，其次需要通过<code data-v-35baa3ce>ref</code>获取组件，进而
操作组件内部的变量和方法，下面为一些组件内部的方法和变量说明：</li></ol> <ul data-v-35baa3ce><li data-v-35baa3ce><code data-v-35baa3ce>lists</code>(变量)，可以通过此值，构建自定义的预览列表，该变量内部如下：</li></ul> <div class="language-js extra-class" data-v-35baa3ce><pre class="language-js" data-v-35baa3ce><code data-v-35baa3ce>lists <span class="token operator" data-v-35baa3ce>=</span> <span class="token punctuation" data-v-35baa3ce>[</span>
	<span class="token punctuation" data-v-35baa3ce>{</span>
		<span class="token literal-property property" data-v-35baa3ce>url</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token string" data-v-35baa3ce>'xxx.png'</span><span class="token punctuation" data-v-35baa3ce>,</span> <span class="token comment" data-v-35baa3ce>// 预览图片的地址</span>
		<span class="token literal-property property" data-v-35baa3ce>error</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token boolean" data-v-35baa3ce>false</span><span class="token punctuation" data-v-35baa3ce>,</span> <span class="token comment" data-v-35baa3ce>// 上传失败，此值为true</span>
		<span class="token literal-property property" data-v-35baa3ce>progress</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token number" data-v-35baa3ce>100</span><span class="token punctuation" data-v-35baa3ce>,</span> <span class="token comment" data-v-35baa3ce>// 0-100之间的值</span>
	<span class="token punctuation" data-v-35baa3ce>}</span><span class="token punctuation" data-v-35baa3ce>,</span>
	<span class="token operator" data-v-35baa3ce>...</span><span class="token operator" data-v-35baa3ce>...</span>
<span class="token punctuation" data-v-35baa3ce>]</span>
</code></pre></div><ul data-v-35baa3ce><li data-v-35baa3ce><code data-v-35baa3ce>deleteItem(index)</code>(方法)，可以用此方法在自定义列表中通过<code data-v-35baa3ce>ref</code>删除某一张图片</li></ul> <p data-v-35baa3ce>以下为完整的自定义图片预览列表示例：</p> <div class="language-html extra-class" data-v-35baa3ce><pre class="language-html" data-v-35baa3ce><code data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
	<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>view</span> <span class="token attr-name" data-v-35baa3ce>class</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>wrap<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
		<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>view</span> <span class="token attr-name" data-v-35baa3ce>class</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>pre-box<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>v-if</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>!showUploadList<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
			<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>view</span> <span class="token attr-name" data-v-35baa3ce>class</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>pre-item<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>v-for</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>(item, index) in lists<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>:key</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>index<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
				<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>image</span> <span class="token attr-name" data-v-35baa3ce>class</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>pre-item-image<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>:src</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>item.url<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>mode</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>aspectFill<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>image</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
			<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>view</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
		<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>view</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
		<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>u-upload</span> <span class="token attr-name" data-v-35baa3ce>:custom-btn</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>true<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>ref</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>uUpload1<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>:show-upload-list</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>showUploadList<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>:action</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>action<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span> 
			<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>template</span> <span class="token attr-name" data-v-35baa3ce><span class="token namespace" data-v-35baa3ce>v-slot:</span>addBtn</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
				<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>view</span> <span class="token attr-name" data-v-35baa3ce>class</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>slot-btn<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>hover-class</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>slot-btn__hover<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>hover-stay-time</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>150<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
					<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>u-icon</span> <span class="token attr-name" data-v-35baa3ce>name</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>photo<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>size</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>60<span class="token punctuation" data-v-35baa3ce>&quot;</span></span> <span class="token attr-name" data-v-35baa3ce>color</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>#c0c4cc<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>u-icon</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
				<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>view</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
			<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
		<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>u-upload</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
	<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>view</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>template</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>

<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>script</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token script" data-v-35baa3ce><span class="token language-javascript" data-v-35baa3ce>
	<span class="token keyword" data-v-35baa3ce>export</span> <span class="token keyword" data-v-35baa3ce>default</span> <span class="token punctuation" data-v-35baa3ce>{</span>
		<span class="token function" data-v-35baa3ce>data</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token punctuation" data-v-35baa3ce>)</span> <span class="token punctuation" data-v-35baa3ce>{</span>
			<span class="token keyword" data-v-35baa3ce>return</span> <span class="token punctuation" data-v-35baa3ce>{</span>
				<span class="token literal-property property" data-v-35baa3ce>action</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token string" data-v-35baa3ce>'http://www.example.com'</span><span class="token punctuation" data-v-35baa3ce>,</span> <span class="token comment" data-v-35baa3ce>// 演示地址</span>
				<span class="token literal-property property" data-v-35baa3ce>showUploadList</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token boolean" data-v-35baa3ce>false</span><span class="token punctuation" data-v-35baa3ce>,</span> 
				<span class="token comment" data-v-35baa3ce>// 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错</span>
				<span class="token comment" data-v-35baa3ce>// 这里直接获取内部的lists变量即可</span>
				<span class="token literal-property property" data-v-35baa3ce>lists</span><span class="token operator" data-v-35baa3ce>:</span> <span class="token punctuation" data-v-35baa3ce>[</span><span class="token punctuation" data-v-35baa3ce>]</span>
			<span class="token punctuation" data-v-35baa3ce>}</span>
		<span class="token punctuation" data-v-35baa3ce>}</span><span class="token punctuation" data-v-35baa3ce>,</span>
		<span class="token comment" data-v-35baa3ce>// 只有onReady生命周期才能调用refs操作组件</span>
		<span class="token function" data-v-35baa3ce>onReady</span><span class="token punctuation" data-v-35baa3ce>(</span><span class="token punctuation" data-v-35baa3ce>)</span> <span class="token punctuation" data-v-35baa3ce>{</span>
			<span class="token comment" data-v-35baa3ce>// 得到整个组件对象，内部图片列表变量为&quot;lists&quot;</span>
			<span class="token keyword" data-v-35baa3ce>this</span><span class="token punctuation" data-v-35baa3ce>.</span>lists <span class="token operator" data-v-35baa3ce>=</span> <span class="token keyword" data-v-35baa3ce>this</span><span class="token punctuation" data-v-35baa3ce>.</span>$refs<span class="token punctuation" data-v-35baa3ce>.</span>uUpload1<span class="token punctuation" data-v-35baa3ce>.</span>lists<span class="token punctuation" data-v-35baa3ce>;</span>
		<span class="token punctuation" data-v-35baa3ce>}</span>
	<span class="token punctuation" data-v-35baa3ce>}</span>
</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>script</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>

<span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;</span>style</span> <span class="token attr-name" data-v-35baa3ce>lang</span><span class="token attr-value" data-v-35baa3ce><span class="token punctuation attr-equals" data-v-35baa3ce>=</span><span class="token punctuation" data-v-35baa3ce>&quot;</span>scss<span class="token punctuation" data-v-35baa3ce>&quot;</span></span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span><span class="token style" data-v-35baa3ce><span class="token language-css" data-v-35baa3ce>
	<span class="token selector" data-v-35baa3ce>.wrap</span> <span class="token punctuation" data-v-35baa3ce>{</span>
		<span class="token property" data-v-35baa3ce>padding</span><span class="token punctuation" data-v-35baa3ce>:</span> 24rpx<span class="token punctuation" data-v-35baa3ce>;</span>
	<span class="token punctuation" data-v-35baa3ce>}</span>
	
	<span class="token selector" data-v-35baa3ce>.slot-btn</span> <span class="token punctuation" data-v-35baa3ce>{</span>
		<span class="token property" data-v-35baa3ce>width</span><span class="token punctuation" data-v-35baa3ce>:</span> 341rpx<span class="token punctuation" data-v-35baa3ce>;</span>
		<span class="token property" data-v-35baa3ce>height</span><span class="token punctuation" data-v-35baa3ce>:</span> 140rpx<span class="token punctuation" data-v-35baa3ce>;</span>
		<span class="token property" data-v-35baa3ce>display</span><span class="token punctuation" data-v-35baa3ce>:</span> flex<span class="token punctuation" data-v-35baa3ce>;</span>
		<span class="token property" data-v-35baa3ce>justify-content</span><span class="token punctuation" data-v-35baa3ce>:</span> center<span class="token punctuation" data-v-35baa3ce>;</span>
		<span class="token property" data-v-35baa3ce>align-items</span><span class="token punctuation" data-v-35baa3ce>:</span> center<span class="token punctuation" data-v-35baa3ce>;</span>
		<span class="token property" data-v-35baa3ce>background</span><span class="token punctuation" data-v-35baa3ce>:</span> <span class="token function" data-v-35baa3ce>rgb</span><span class="token punctuation" data-v-35baa3ce>(</span>244<span class="token punctuation" data-v-35baa3ce>,</span> 245<span class="token punctuation" data-v-35baa3ce>,</span> 246<span class="token punctuation" data-v-35baa3ce>)</span><span class="token punctuation" data-v-35baa3ce>;</span>
		<span class="token property" data-v-35baa3ce>border-radius</span><span class="token punctuation" data-v-35baa3ce>:</span> 10rpx<span class="token punctuation" data-v-35baa3ce>;</span>
	<span class="token punctuation" data-v-35baa3ce>}</span>

	<span class="token selector" data-v-35baa3ce>.slot-btn__hover</span> <span class="token punctuation" data-v-35baa3ce>{</span>
		<span class="token property" data-v-35baa3ce>background-color</span><span class="token punctuation" data-v-35baa3ce>:</span> <span class="token function" data-v-35baa3ce>rgb</span><span class="token punctuation" data-v-35baa3ce>(</span>235<span class="token punctuation" data-v-35baa3ce>,</span> 236<span class="token punctuation" data-v-35baa3ce>,</span> 238<span class="token punctuation" data-v-35baa3ce>)</span><span class="token punctuation" data-v-35baa3ce>;</span>
	<span class="token punctuation" data-v-35baa3ce>}</span>

	<span class="token selector" data-v-35baa3ce>.pre-box</span> <span class="token punctuation" data-v-35baa3ce>{</span>
		<span class="token property" data-v-35baa3ce>display</span><span class="token punctuation" data-v-35baa3ce>:</span> flex<span class="token punctuation" data-v-35baa3ce>;</span>
		<span class="token property" data-v-35baa3ce>align-items</span><span class="token punctuation" data-v-35baa3ce>:</span> center<span class="token punctuation" data-v-35baa3ce>;</span>
		<span class="token property" data-v-35baa3ce>justify-content</span><span class="token punctuation" data-v-35baa3ce>:</span> space-between<span class="token punctuation" data-v-35baa3ce>;</span>
		<span class="token property" data-v-35baa3ce>flex-wrap</span><span class="token punctuation" data-v-35baa3ce>:</span> wrap<span class="token punctuation" data-v-35baa3ce>;</span>
	<span class="token punctuation" data-v-35baa3ce>}</span>

	<span class="token selector" data-v-35baa3ce>.pre-item</span> <span class="token punctuation" data-v-35baa3ce>{</span>
		<span class="token property" data-v-35baa3ce>flex</span><span class="token punctuation" data-v-35baa3ce>:</span> 0 0 48.5%<span class="token punctuation" data-v-35baa3ce>;</span>
		<span class="token property" data-v-35baa3ce>border-radius</span><span class="token punctuation" data-v-35baa3ce>:</span> 10rpx<span class="token punctuation" data-v-35baa3ce>;</span>
		<span class="token property" data-v-35baa3ce>height</span><span class="token punctuation" data-v-35baa3ce>:</span> 140rpx<span class="token punctuation" data-v-35baa3ce>;</span>
		<span class="token property" data-v-35baa3ce>overflow</span><span class="token punctuation" data-v-35baa3ce>:</span> hidden<span class="token punctuation" data-v-35baa3ce>;</span>
		<span class="token property" data-v-35baa3ce>position</span><span class="token punctuation" data-v-35baa3ce>:</span> relative<span class="token punctuation" data-v-35baa3ce>;</span>
		<span class="token property" data-v-35baa3ce>margin-bottom</span><span class="token punctuation" data-v-35baa3ce>:</span> 20rpx<span class="token punctuation" data-v-35baa3ce>;</span>
	<span class="token punctuation" data-v-35baa3ce>}</span>

	<span class="token selector" data-v-35baa3ce>.pre-item-image</span> <span class="token punctuation" data-v-35baa3ce>{</span>
		<span class="token property" data-v-35baa3ce>width</span><span class="token punctuation" data-v-35baa3ce>:</span> 100%<span class="token punctuation" data-v-35baa3ce>;</span>
		<span class="token property" data-v-35baa3ce>height</span><span class="token punctuation" data-v-35baa3ce>:</span> 140rpx<span class="token punctuation" data-v-35baa3ce>;</span>
	<span class="token punctuation" data-v-35baa3ce>}</span>
</span></span><span class="token tag" data-v-35baa3ce><span class="token tag" data-v-35baa3ce><span class="token punctuation" data-v-35baa3ce>&lt;/</span>style</span><span class="token punctuation" data-v-35baa3ce>&gt;</span></span>
</code></pre></div><h3 id="api" data-v-35baa3ce><a href="#api" class="header-anchor" data-v-35baa3ce>#</a> API</h3> <h3 id="props" data-v-35baa3ce><a href="#props" class="header-anchor" data-v-35baa3ce>#</a> Props</h3> <table data-v-35baa3ce><thead data-v-35baa3ce><tr data-v-35baa3ce><th data-v-35baa3ce>参数</th> <th data-v-35baa3ce>说明</th> <th data-v-35baa3ce>类型</th> <th data-v-35baa3ce>默认值</th> <th data-v-35baa3ce>可选值</th></tr></thead> <tbody data-v-35baa3ce><tr data-v-35baa3ce><td data-v-35baa3ce>action</td> <td data-v-35baa3ce>服务器上传地址</td> <td data-v-35baa3ce>String</td> <td data-v-35baa3ce>-</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>max-count</td> <td data-v-35baa3ce>最大选择图片的数量</td> <td data-v-35baa3ce>String | Number</td> <td data-v-35baa3ce>99</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>width</td> <td data-v-35baa3ce>图片预览区域和添加图片按钮的宽度，单位rpx，不能是百分比，或者<code data-v-35baa3ce>auto</code></td> <td data-v-35baa3ce>String | Number</td> <td data-v-35baa3ce>200</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>height</td> <td data-v-35baa3ce>图片预览区域和添加图片按钮的高度，单位rpx，不能是百分比，或者<code data-v-35baa3ce>auto</code></td> <td data-v-35baa3ce>String | Number</td> <td data-v-35baa3ce>200</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>custom-btn</td> <td data-v-35baa3ce>如果需要自定义选择图片的按钮，设置为<code data-v-35baa3ce>true</code></td> <td data-v-35baa3ce>Boolean</td> <td data-v-35baa3ce>false</td> <td data-v-35baa3ce>true</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>show-progress</td> <td data-v-35baa3ce>是否显示进度条</td> <td data-v-35baa3ce>Boolean</td> <td data-v-35baa3ce>true</td> <td data-v-35baa3ce>false</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>disabled</td> <td data-v-35baa3ce>是否启用(显示/隐藏)组件</td> <td data-v-35baa3ce>Boolean</td> <td data-v-35baa3ce>false</td> <td data-v-35baa3ce>true</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>image-mode</td> <td data-v-35baa3ce>预览图片等显示模式，可选值为uni的image的<code data-v-35baa3ce>mode</code>属性值</td> <td data-v-35baa3ce>String</td> <td data-v-35baa3ce>aspectFill</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>header</td> <td data-v-35baa3ce>上传携带的头信息，对象形式</td> <td data-v-35baa3ce>Object</td> <td data-v-35baa3ce>{}</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>form-data</td> <td data-v-35baa3ce>上传额外携带的参数</td> <td data-v-35baa3ce>Object</td> <td data-v-35baa3ce>{}</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>name</td> <td data-v-35baa3ce>上传文件的字段名，供后端获取使用</td> <td data-v-35baa3ce>String</td> <td data-v-35baa3ce>file</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>size-type</td> <td data-v-35baa3ce>original 原图，compressed 压缩图，默认二者都有，H5无效</td> <td data-v-35baa3ce>Array&lt;String&gt;</td> <td data-v-35baa3ce>['original', 'compressed']</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>source-type</td> <td data-v-35baa3ce>选择图片的来源，album-从相册选图，camera-使用相机，默认二者都有</td> <td data-v-35baa3ce>Array&lt;String&gt;</td> <td data-v-35baa3ce>['album', 'camera']</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>preview-full-image</td> <td data-v-35baa3ce>是否可以通过<code data-v-35baa3ce>uni.previewImage</code>预览已选择的图片</td> <td data-v-35baa3ce>Boolean</td> <td data-v-35baa3ce>true</td> <td data-v-35baa3ce>false</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>multiple</td> <td data-v-35baa3ce>是否开启图片多选，部分安卓机型不支持</td> <td data-v-35baa3ce>Boolean</td> <td data-v-35baa3ce>true</td> <td data-v-35baa3ce>false</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>deletable</td> <td data-v-35baa3ce>是否显示删除图片的按钮</td> <td data-v-35baa3ce>Boolean</td> <td data-v-35baa3ce>true</td> <td data-v-35baa3ce>false</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>max-size</td> <td data-v-35baa3ce>选择单个文件的最大大小，单位B(byte)，默认不限制</td> <td data-v-35baa3ce>String | Number</td> <td data-v-35baa3ce>Number.MAX_VALUE</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>file-list</td> <td data-v-35baa3ce>默认显示的图片列表，数组元素为对象，必须提供<code data-v-35baa3ce>url</code>属性</td> <td data-v-35baa3ce>Array&lt;Object&gt;</td> <td data-v-35baa3ce>-</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>upload-text</td> <td data-v-35baa3ce>选择图片按钮的提示文字</td> <td data-v-35baa3ce>String</td> <td data-v-35baa3ce>选择图片</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>auto-upload</td> <td data-v-35baa3ce>选择完图片是否自动上传，见上方说明</td> <td data-v-35baa3ce>Boolean</td> <td data-v-35baa3ce>true</td> <td data-v-35baa3ce>false</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>show-tips</td> <td data-v-35baa3ce>特殊情况下是否自动提示toast，见上方说明</td> <td data-v-35baa3ce>Boolean</td> <td data-v-35baa3ce>true</td> <td data-v-35baa3ce>false</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>show-upload-list</td> <td data-v-35baa3ce>是否显示组件内部的图片预览</td> <td data-v-35baa3ce>Boolean</td> <td data-v-35baa3ce>true</td> <td data-v-35baa3ce>false</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>del-icon</td> <td data-v-35baa3ce>右上角删除图标名称，只能为uView内置图标</td> <td data-v-35baa3ce>String</td> <td data-v-35baa3ce>close</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>del-bg-color</td> <td data-v-35baa3ce>右上角关闭按钮的背景颜色</td> <td data-v-35baa3ce>String</td> <td data-v-35baa3ce>#fa3534</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>del-color</td> <td data-v-35baa3ce>右上角关闭按钮图标的颜色</td> <td data-v-35baa3ce>String</td> <td data-v-35baa3ce>#ffffff</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>to-json</td> <td data-v-35baa3ce>如果上传后服务端返回的值为<code data-v-35baa3ce>json</code>字符串的话，是否自动转为<code data-v-35baa3ce>json</code></td> <td data-v-35baa3ce>Boolean</td> <td data-v-35baa3ce>true</td> <td data-v-35baa3ce>false</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>before-upload</td> <td data-v-35baa3ce>每个文件上传前触发的钩子回调函数，见上方说明，注意不要加括号</td> <td data-v-35baa3ce>Function</td> <td data-v-35baa3ce>-</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>limitType</td> <td data-v-35baa3ce>允许的图片后缀</td> <td data-v-35baa3ce>Array</td> <td data-v-35baa3ce>['png', 'jpg', 'jpeg', 'webp', 'gif']</td> <td data-v-35baa3ce>-</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>index</td> <td data-v-35baa3ce>在各个回调事件中的最后一个参数返回，用于区别是哪一个组件的事件</td> <td data-v-35baa3ce>String | Number</td> <td data-v-35baa3ce>-</td> <td data-v-35baa3ce>-</td></tr></tbody></table> <h3 id="methods" data-v-35baa3ce><a href="#methods" class="header-anchor" data-v-35baa3ce>#</a> Methods</h3> <p data-v-35baa3ce>此方法如要通过ref手动调用</p> <table data-v-35baa3ce><thead data-v-35baa3ce><tr data-v-35baa3ce><th data-v-35baa3ce>名称</th> <th data-v-35baa3ce>说明</th></tr></thead> <tbody data-v-35baa3ce><tr data-v-35baa3ce><td data-v-35baa3ce>upload</td> <td data-v-35baa3ce>调用此方法，手动上传图片</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>clear</td> <td data-v-35baa3ce>调用此方法，清空内部文件列表</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>reUpload</td> <td data-v-35baa3ce>调用此方法，重新上传内部上传失败或者尚未上传的图片</td></tr> <tr data-v-35baa3ce><td data-v-35baa3ce>remove(index)</td> <td data-v-35baa3ce>手动移除列表的某一个图片，<code data-v-35baa3ce>index</code>为<code data-v-35baa3ce>lists</code>数组的索引</td></tr></tbody></table> <h3 id="slot" data-v-35baa3ce><a href="#slot" class="header-anchor" data-v-35baa3ce>#</a> Slot</h3> <table data-v-35baa3ce><thead data-v-35baa3ce><tr data-v-35baa3ce><th style="text-align:left;" data-v-35baa3ce>名称</th> <th style="text-align:left;" data-v-35baa3ce>说明</th></tr></thead> <tbody data-v-35baa3ce><tr data-v-35baa3ce><td style="text-align:left;" data-v-35baa3ce>addBtn</td> <td style="text-align:left;" data-v-35baa3ce>自定义的选择图片按钮</td></tr></tbody></table> <h3 id="events" data-v-35baa3ce><a href="#events" class="header-anchor" data-v-35baa3ce>#</a> Events</h3> <p data-v-35baa3ce>回调参数中的<code data-v-35baa3ce>lists</code>参数，为目前组件内的所有图片数组，<code data-v-35baa3ce>index</code>为当前操作的图片的索引，<code data-v-35baa3ce>name</code>为通过<code data-v-35baa3ce>props</code>传递的<code data-v-35baa3ce>index</code>参数(1.6.1加入)</p> <table data-v-35baa3ce><thead data-v-35baa3ce><tr data-v-35baa3ce><th style="text-align:left;" data-v-35baa3ce>事件名</th> <th style="text-align:left;" data-v-35baa3ce>说明</th> <th style="text-align:left;" data-v-35baa3ce>回调参数</th></tr></thead> <tbody data-v-35baa3ce><tr data-v-35baa3ce><td style="text-align:left;" data-v-35baa3ce>on-oversize</td> <td style="text-align:left;" data-v-35baa3ce>图片大小超出最大允许大小</td> <td style="text-align:left;" data-v-35baa3ce>(file, lists, name), name为通过<code data-v-35baa3ce>props</code>传递的<code data-v-35baa3ce>index</code>参数</td></tr> <tr data-v-35baa3ce><td style="text-align:left;" data-v-35baa3ce>on-preview</td> <td style="text-align:left;" data-v-35baa3ce>全屏预览图片时触发</td> <td style="text-align:left;" data-v-35baa3ce>(url, lists, name)，url为当前选中的图片地址，index为通过<code data-v-35baa3ce>props</code>传递的<code data-v-35baa3ce>index</code>参数</td></tr> <tr data-v-35baa3ce><td style="text-align:left;" data-v-35baa3ce>on-remove</td> <td style="text-align:left;" data-v-35baa3ce>移除图片时触发</td> <td style="text-align:left;" data-v-35baa3ce>(index, lists, name)，name为通过<code data-v-35baa3ce>props</code>传递的<code data-v-35baa3ce>index</code>参数</td></tr> <tr data-v-35baa3ce><td style="text-align:left;" data-v-35baa3ce>on-success</td> <td style="text-align:left;" data-v-35baa3ce>图片上传成功时触发</td> <td style="text-align:left;" data-v-35baa3ce>(data, index, lists, name)，data为服务器返回的数据，name为通过<code data-v-35baa3ce>props</code>传递的<code data-v-35baa3ce>index</code>参数</td></tr> <tr data-v-35baa3ce><td style="text-align:left;" data-v-35baa3ce>on-change</td> <td style="text-align:left;" data-v-35baa3ce>图片上传后，无论成功或者失败都会触发</td> <td style="text-align:left;" data-v-35baa3ce>(res, index, lists, name)，res为服务器返回的信息，name为通过<code data-v-35baa3ce>props</code>传递的<code data-v-35baa3ce>index</code>参数</td></tr> <tr data-v-35baa3ce><td style="text-align:left;" data-v-35baa3ce>on-error</td> <td style="text-align:left;" data-v-35baa3ce>图片上传失败时触发</td> <td style="text-align:left;" data-v-35baa3ce>(res, index, lists, name)，res为服务器返回的信息，name为通过<code data-v-35baa3ce>props</code>传递的<code data-v-35baa3ce>index</code>参数</td></tr> <tr data-v-35baa3ce><td style="text-align:left;" data-v-35baa3ce>on-progress</td> <td style="text-align:left;" data-v-35baa3ce>图片上传过程中的进度变化过程触发</td> <td style="text-align:left;" data-v-35baa3ce>(res, index, lists, name)，res为服务器返回的信息，具体参数请打印查看，name为通过<code data-v-35baa3ce>props</code>传递的<code data-v-35baa3ce>index</code>参数</td></tr> <tr data-v-35baa3ce><td style="text-align:left;" data-v-35baa3ce>on-uploaded</td> <td style="text-align:left;" data-v-35baa3ce>所有图片上传完毕触发</td> <td style="text-align:left;" data-v-35baa3ce>(lists, name)，可以通过此事件，将lists参数获取，提交给后端使用，name为通过<code data-v-35baa3ce>props</code>传递的<code data-v-35baa3ce>index</code>参数</td></tr> <tr data-v-35baa3ce><td style="text-align:left;" data-v-35baa3ce>on-choose-complete</td> <td style="text-align:left;" data-v-35baa3ce>每次选择图片后触发，只是让外部可以得知每次选择后，内部的文件列表</td> <td style="text-align:left;" data-v-35baa3ce>(lists, name)，内部当前的文件列表，name为通过<code data-v-35baa3ce>props</code>传递的<code data-v-35baa3ce>index</code>参数</td></tr> <tr data-v-35baa3ce><td style="text-align:left;" data-v-35baa3ce>on-list-change</td> <td style="text-align:left;" data-v-35baa3ce>当内部文件列表被加入文件、移除文件，或手动调用<code data-v-35baa3ce>clear</code>方法时触发</td> <td style="text-align:left;" data-v-35baa3ce>(lists, name)，内部文件变化之后的列表，name为通过<code data-v-35baa3ce>props</code>传递的<code data-v-35baa3ce>index</code>参数</td></tr> <tr data-v-35baa3ce><td style="text-align:left;" data-v-35baa3ce>on-choose-fail</td> <td style="text-align:left;" data-v-35baa3ce>选择文件出错时触发，比如选择文件时取消了操作，只在微信和APP有效</td> <td style="text-align:left;" data-v-35baa3ce>(error)，错误信息</td></tr></tbody></table></div> <footer class="page-edit"><!----> <div class="edit-link"><a href="https://gitee.com/vk-uni/vk-uview-ui-doc.git/edit/master/docs/components/upload.md" target="_blank" rel="noopener noreferrer">编辑此页（一起来纠错与优化，方便你我Ta）</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">最后修改时间:</span> <span class="time">5/26/2023, 11:47:04 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="numberBox.html" class="prev">
        NumberBox 步进器
      </a></span> <span class="next"><a href="verificationCode.html">
        VerificationCode 验证码倒计时
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
		<script src="../assets/js/app.06a5b7ec.js" defer></script><script src="../assets/js/3.b1cc55a0.js" defer></script><script src="../assets/js/4.4b844322.js" defer></script><script src="../assets/js/62.c196204b.js" defer></script><script src="../assets/js/19.2b0b9da7.js" defer></script><script src="../assets/js/9.ba52e2b0.js" defer></script><script src="../assets/js/6.2c513bee.js" defer></script>
	</body>

<!-- Mirrored from vkuviewdoc.fsq.pub/components/upload.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 21 May 2025 17:31:01 GMT -->
</html>
